<template>
  <div class='container'>
	  <!-- 搜索部分-->
    <div class='search-portion'>
			<el-form>
		<ul class='first-line'>
			<li class='first-line-li'>
				<span>活动编号</span>
				 <el-input size="medium" style='width:200px' placeholder="请输入活动编号" onkeyup="this.value=this.value.replace(/\s+/g,'')" v-model='formAct.order'></el-input>
				<span>店铺</span>
				  <el-select v-model="formAct.platform" clearable placeholder="显示全部" size='medium'>
						<el-option
						  v-for="item in optionsStore"
						  :key="item.value"
						  :label="item.label"
						  :value="item.value">
						</el-option>
				  </el-select>
				   <span>活动状态</span>
				   <el-select v-model="formAct.state" clearable placeholder="显示全部" size='medium'>
				   	<el-option
				   		v-for="item in optionsState"
				   		:key="item.value"
				   		:label="item.label"
				   		:value="item.value">
				   	</el-option>
				   </el-select>
			</li>
		</ul>
		<ul class='last-line'>
			<li class='last-line-li'>
				<span>活动发布时间</span>
				 <el-date-picker
      v-model="times"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
			value-format="yyyy-MM-dd">
    </el-date-picker>

		<!-- <el-date-picker
      v-model="value4"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  </div> -->

			</li>
			<li>
				<el-button type='primary' class='search' v-on:click='searchAct'>搜索</el-button>
			</li>
		</ul>
		</el-form>
	</div>
	<!-- 任务列表部分 -->
	<div class='list-portion'>
		 <el-table
			:data="dataList"
			stripe
			height='400'
			style="width: 100%">
			<el-table-column
			  prop="order_num"
				width='170'
			  label="任务编号">
			</el-table-column>
			<el-table-column
			  prop="created_time"
			  label="发布日期">
			</el-table-column>
			<el-table-column
			  prop="shop_name"
			  label="店铺名">
			</el-table-column>
			<el-table-column
			prop="baby_good"
			label="产品名">
			</el-table-column>
			<el-table-column
			prop="baby_id"
			label="宝贝ID">
			</el-table-column>
			<el-table-column
			prop="state"
			label="状态">
			</el-table-column>
			<el-table-column
			prop="count"
			label="总单数">
			</el-table-column>
			<el-table-column
			prop="over_num"
			label="已完成单数">
			</el-table-column>
			<el-table-column
			prop="for_num"
			label="进行中单数">
			</el-table-column>
			<el-table-column
			prop="address"
			label="操作">
			<template slot-scope="scope">
        <el-button size='mini' type='primary' plain @click="handleClick(scope.row)">查看详情</el-button>
      </template>
			</el-table-column>
		  </el-table>
	</div>
	<!-- 分页 -->
	<div class="block">
			<el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="formAct.pageIndex"
			  :page-size="formAct.pageSize"
			  layout="total, prev, pager, next, jumper"
			  :total="total"
			  class='block-page'>
			</el-pagination>
  </div>
  <!-- 弹框 -->
  <el-dialog
  title="查看详情"
  :visible.sync="dialogVisible"
  :before-close="handleClose">
  <ul class='dialog'>
    <li>
        <span>任务生成订单总数：{{layList.sum_num}}单</span>
        <span>未放单：{{layList.no_num}}单</span>
        <span>已放单：{{layList.to_num}}单</span>
        <span>已接单：{{layList.user_num}}单</span>
        <span>已完成：{{layList.user_yes_num}}单</span>
    </li>
    <li>
        <span>店铺名：{{layList.shop_name}}</span>
        <span>产品名：{{layList.baby_goods}}</span>
        <span>宝贝ID:{{layList.baby_id}}</span>
    </li>
  </ul>

       <el-table :data="gridData" class='table'>
     <el-table-column property="mold" label="活动类型"></el-table-column>
    <el-table-column property="keyword" label="关键词" width='150'></el-table-column>
    <el-table-column property="num" label="发单数"></el-table-column>
    <el-table-column property="true_pay" label="本金"></el-table-column>
    <el-table-column property="store_commission" label="佣金"></el-table-column>
    <el-table-column property="insurance_money" label="保险"></el-table-column>
    <el-table-column property="value_added_money" label="增值服务局"></el-table-column>
  </el-table>
  <div class='total-price'>支付总金额：{{allPrice.toFixed(2)}}元</div>





  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>
<script src='./ActivityList.js'>

</script>

<style lang='scss' scoped>
	@import './ActivityList.scss';
</style>
